import React, {SyntheticEvent} from "react";
import {Input, Space as AntdSpace} from 'antd';
import {VJsonComponent} from "../../factory";
import {YvanEvent} from "../../types";
import {apply, YvanEventBind, YvanEventDispatch, convertCH} from "../../utils/helper";
import * as Extend from '../../extend'
import _ from 'lodash'
import {FormItemBaseState, FormItemBaseProp, VJsonFormItemBase} from "./VJsonFormItemBase";

export interface TextVJsonProp extends FormItemBaseProp<Text> {
    addonAfter?: string | React.ReactNode
    addonBefore?: string | React.ReactNode
    defaultValue?: string
    disabled?: boolean
    maxLength?: number
    prefix?: string | React.ReactNode
    size?: 'large' | 'middle' | 'small'
    suffix?: string | React.ReactNode
    type?: string
    onChange?: YvanEvent<Text>
    onPressEnter?: YvanEvent<Text>
    autoTrim?: boolean,
    autoConvertCH?: boolean,
    onInput?: YvanEvent<Text>
    allowClear?: boolean
    bordered?: boolean
}

export interface TextState extends FormItemBaseState<Text> {

}

@VJsonComponent({
    view: 'text'
})
export default class Text extends VJsonFormItemBase<Text, TextVJsonProp, TextState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        allowClear: true,
        autoTrim: true,
        autoConvertCH: false,
    }

    lock = false

    constructor(props: any) {
        super(props, Text.defaultProps);
    }

    protected onValueChange(newValue: any) {
        // newValue = convertCH(newValue)
        // newValue = _.trim(newValue)
        this.value = newValue
        YvanEventDispatch(this.props.vjson.onChange, this, newValue)
        // this.value = newValue
    }

    normalizeToEntity(newValue: any) {
        if (this.props.vjson.autoConvertCH) {
            newValue = convertCH(newValue)
        }
        if (this.props.vjson.autoTrim) {
            newValue = _.trim(newValue)
        }
        return newValue
    }

    handleComposition(evt) {
        if (evt.type === 'compositionstart') {
            this.lock = true
            return
        }

        if (evt.type === 'compositionend') {
            this.lock = false
        }

        if (!this.lock) {
            this._setValue(evt.target.value)
        }
    }

    _setValue = _.debounce(this.onValueChange, 100)

    protected renderWrapper(): JSX.Element {
        if (Extend.isDebugMode()) {
            console.log('RenderText ', this.toString())
        }

        return (
            //@ts-ignore
            <Input key={this.key} view_id={this.key} aria-roledescription={this.view}
                   addonAfter={apply(this, this.props.vjson.addonAfter)}
                   addonBefore={apply(this, this.props.vjson.addonBefore)}
                   maxLength={apply(this, this.props.vjson.maxLength)}
                   prefix={apply(this, this.props.vjson.prefix)}
                   size={apply(this, this.props.vjson.size)}
                   suffix={apply(this, this.props.vjson.suffix)}
                   type={apply(this, this.props.vjson.type)}
                   bordered={apply(this, this.props.vjson.bordered)}
                   placeholder={apply(this, this.props.vjson.placeholder)}
                   onFocus={YvanEventBind(this.props.vjson.onFocus, this)}
                   onBlur={YvanEventBind(this.props.vjson.onBlur, this)}

                   disabled={apply(this, this.props.vjson.disabled)}
                   allowClear={apply(this, this.props.vjson.allowClear)}

                   onChange={this.handleComposition.bind(this)}
                   onCompositionStart={this.handleComposition.bind(this)}
                   onCompositionEnd={this.handleComposition.bind(this)}

                   onInput={YvanEventBind(this.props.vjson.onInput, this)}
                   onPressEnter={YvanEventBind(this.props.vjson.onPressEnter, this)}
            />
        )
    }
}
